import React, { Component } from 'react'
import { connect } from 'react-redux'
import { loadDataAsync, decrementInventory } from '@/store/action-creators/ProdActionCreator'
import * as cartActions from '@/store/action-creators/CartActionCreator'

import ProductsUi from './ProductsUi'

@connect(
  state => ({
    products: state.product.all
  }),

  dispatch => ({
    loadData() {
      dispatch(loadDataAsync())
    },

    addToCart(product) {
      // 调用另外一个功能模块的reducer，添加产品到购物车
      dispatch(cartActions.addToCart(product))
      // 调用产品模块的reducer， 减少库存
      dispatch(decrementInventory(product))
      // 求一次总价
      dispatch(cartActions.culprice())
    }
  })
)
export default class Products extends Component {

  componentDidMount() {
    this.props.loadData()
  }

  render() {
    return (
      <ProductsUi 
        products={this.props.products}
        addToCart={this.props.addToCart}
      ></ProductsUi>
    )
  }
}
